<template>

	<view class="content_box">
		<view class="status_bar">
			<!-- 这里是状态栏占位 -->
		</view>
		<!-- 导航栏start -->
		<view class="">
			<!-- <uni-nav-bar style="top: 50upx;" backgroundColor="#FF5551">
				<view class="uni-flex">
					<view class="flex-item main-bg-hover-color rounded-lt rounded-lb" style=" width: 80rpx;">
						<label class="iconfont iconsousuo ml-2 text-white">

						</label>
					</view>
					<view class="flex-item">
						<input type="text" placeholder-class="ml-1 text-white font-md text-white-l" style="height: 60rpx;" placeholder="搜一搜你想要的"
						 class="main-bg-hover-color font-md w-470 text-white rounded-rt rounded-rb">
						</input>
					</view>

				</view>
				<view slot="left" class="iconfont iconsaoyisao ml-2 font-45 text-white "></view>
				<view slot="right" class="iconfont iconjia ml-0 font-45 text-white"></view>

			</uni-nav-bar> -->
		</view>
		<!-- 导航栏end -->
		<!-- 横图start -->
		<view class="">
			<image src="../../static/images/class/class_top.png" style="width: 750upx;height: 213upx;" mode=""></image>
		</view>
		<!-- 横图end -->

		<!-- 分类布局产品start -->
		<view class="d-flex border-top border-light-secondary" style="height: 100%;box-sizing: border-box;">
			<!-- 左侧分类start -->
			<scroll-view scroll-y style="flex: 1.2;" class="bg-light border-right border-light-secondary">
				<view class="border-bottom border-light-secondary py-1 bg-light " :class="activeIndex === index ? 'bg-white' : ''"
				 v-for="(item,index) in cate" :key="index" @tap="changeCate(index)">
					<view class="py-1 font-md text-muted text-center">
						<view :class="activeIndex === index ? 'class-active-line rounded-50' : ''" class="d-inline-block " style="width: 8upx; height:22upx; float: left;  padding-top: 33upx; margin-left: 4upx;"></view>
						<text :class="activeIndex === index ? 'class-active' : ''">
							{{item.name}}
						</text>
					</view>
				</view>
			</scroll-view>
			<!-- 左侧分类end -->

			<!-- 右侧商品start -->
			<scroll-view scroll-y style="flex: 3.5;">

				<view class="ml-1">
					<view class="uni-flex uni-row">
						<view class="flex-item ml-3 mt-1">
							<image class="rounded-20 image_icon" src="../../static/images/class/list_3.png"></image>
						</view>
						<view class="flex-item pl-4 ml-1">
							<view class="mt-1 font-md">我是韭菜</view>
							<view class="mt-1">
								<text class="text-pink font-md">0.5积分</text>
							</view>
							<view class="mt-1 font-md">
								<text class="iconfont iconminus-opp text-pink"></text>
								<text class="p-2">2</text>
								<text class="iconfont iconjia1 text-pink"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="ml-1">
					<view class="uni-flex uni-row">
						<view class="flex-item ml-3 mt-1">
							<image class="rounded-20 image_icon" src="../../static/images/class/list_3.png"></image>
						</view>
						<view class="flex-item pl-4 ml-1">
							<view class="mt-1 font-md">我是韭菜</view>
							<view class="mt-1">
								<text class="text-pink font-md">0.5积分</text>
							</view>
							<view class="mt-1 font-md">
								<text class="iconfont iconminus-opp text-pink"></text>
								<text class="p-2">2</text>
								<text class="iconfont iconjia1 text-pink"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="ml-1">
					<view class="uni-flex uni-row">
						<view class="flex-item ml-3 mt-1">
							<image class="rounded-20 image_icon" src="../../static/images/class/list_3.png"></image>
						</view>
						<view class="flex-item pl-4 ml-1">
							<view class="mt-1 font-md">我是韭菜</view>
							<view class="mt-1">
								<text class="text-pink font-md">0.5积分</text>
							</view>
							<view class="mt-1 font-md">
								<text class="iconfont iconminus-opp text-pink"></text>
								<text class="p-2">2</text>
								<text class="iconfont iconjia1 text-pink"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="ml-1">
					<view class="uni-flex uni-row">
						<view class="flex-item ml-3 mt-1">
							<image class="rounded-20 image_icon" src="../../static/images/class/list_3.png"></image>
						</view>
						<view class="flex-item pl-4 ml-1">
							<view class="mt-1 font-md">我是韭菜</view>
							<view class="mt-1">
								<text class="text-pink font-md">0.5积分</text>
							</view>
							<view class="mt-1 font-md">
								<text class="iconfont iconminus-opp text-pink"></text>
								<text class="p-2">2</text>
								<text class="iconfont iconjia1 text-pink"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="ml-1">
					<view class="uni-flex uni-row">
						<view class="flex-item ml-3 mt-1">
							<image class="rounded-20 image_icon" src="../../static/images/class/list_3.png"></image>
						</view>
						<view class="flex-item pl-4 ml-1">
							<view class="mt-1 font-md">我是韭菜</view>
							<view class="mt-1">
								<text class="text-pink font-md">0.5积分</text>
							</view>
							<view class="mt-1 font-md">
								<text class="iconfont iconminus-opp text-pink"></text>
								<text class="p-2">2</text>
								<text class="iconfont iconjia1 text-pink"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="ml-1">
					<view class="uni-flex uni-row">
						<view class="flex-item ml-3 mt-1">
							<image class="rounded-20 image_icon" src="../../static/images/class/list_3.png"></image>
						</view>
						<view class="flex-item pl-4 ml-1">
							<view class="mt-1 font-md">我是韭菜</view>
							<view class="mt-1">
								<text class="text-pink font-md">0.5积分</text>
							</view>
							<view class="mt-1 font-md">
								<text class="iconfont iconminus-opp text-pink"></text>
								<text class="p-2">2</text>
								<text class="iconfont iconjia1 text-pink"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="ml-1">
					<view class="uni-flex uni-row">
						<view class="flex-item ml-3 mt-1">
							<image class="rounded-20 image_icon" src="../../static/images/class/list_3.png"></image>
						</view>
						<view class="flex-item pl-4 ml-1">
							<view class="mt-1 font-md">我是韭菜</view>
							<view class="mt-1">
								<text class="text-pink font-md">0.5积分</text>
							</view>
							<view class="mt-1 font-md">
								<text class="iconfont iconminus-opp text-pink"></text>
								<text class="p-2">2</text>
								<text class="iconfont iconjia1 text-pink"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="ml-1">
					<view class="uni-flex uni-row">
						<view class="flex-item ml-3 mt-1">
							<image class="rounded-20 image_icon" src="../../static/images/class/list_3.png"></image>
						</view>
						<view class="flex-item pl-4 ml-1">
							<view class="mt-1 font-md">我是韭菜</view>
							<view class="mt-1">
								<text class="text-pink font-md">0.5积分</text>
							</view>
							<view class="mt-1 font-md">
								<text class="iconfont iconminus-opp text-pink"></text>
								<text class="p-2">2</text>
								<text class="iconfont iconjia1 text-pink"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="ml-1">
					<view class="uni-flex uni-row">
						<view class="flex-item ml-3 mt-1">
							<image class="rounded-20 image_icon" src="../../static/images/class/list_3.png"></image>
						</view>
						<view class="flex-item pl-4 ml-1">
							<view class="mt-1 font-md">我是韭菜</view>
							<view class="mt-1">
								<text class="text-pink font-md">0.5积分</text>
							</view>
							<view class="mt-1 font-md">
								<text class="iconfont iconminus-opp text-pink"></text>
								<text class="p-2">2</text>
								<text class="iconfont iconjia1 text-pink"></text>
							</view>
						</view>
					</view>
				</view>


			</scroll-view>
			<!-- 右侧商品end -->

		</view>

		<!-- 分类布局end -->
		<!-- 购物车结算浮窗 start-->

		<view class="d-flex" style="">

		</view>
		<!-- 购物车结算浮窗 end-->

		<!-- 底部tabber start -->
		<view class="" :style="{height: this.tabbarHeight+162 +'rpx'}">
			<hans-tabber class="tabbar" :list="list1" :current="current1" style="position:fixed;bottom:0;width:100%;left:0;right:0;height: 100upx;"
			 @tabChange="tabChange"></hans-tabber>
		</view>
		<!-- 底部tabber end -->





	</view>

</template>


<script>
	import hansTabber from '@/components/hans-tabbar/hans-tabbar.vue'

	export default {
		components: {
			hansTabber
		},
		data() {
			return {
				tabbarHeight: 0,
				active: '',
				animate: 'zoomIn',
				height: '',
				tabbarHeight: '',

				list1: [{
						"text": "首页",
						"iconPath": '../../static/images/tabbar/buy_list.png',
						"selectedIconPath": '../../static/images/tabbar/buy_list_active.png'
					},
					{
						"text": "购买服务",
						"iconPath": '../../static/images/tabbar/buy_list.png',
						"selectedIconPath": '../../static/images/tabbar/buy_list_active.png'
					},
					{
						"text": "购物车",
						"iconPath": '../../static/images/tabbar/cart.png',
						"selectedIconPath": '../../static/images/tabbar/cart_active.png'
					},
					{
						"text": "个人中心",
						"iconPath": '../../static/images/tabbar/user.png',
						"selectedIconPath": '../../static/images/tabbar/user_active.png'
					}
				],
				// 当前选中的分类
				activeIndex: 0,
				cate: [{
						name: '凉菜'
					},
					{
						name: '炒菜'
					},
					{
						name: '特色菜'
					},
					{
						name: '套餐'
					},
					{
						name: '套餐'
					},
					{
						name: '套餐'
					},
					{
						name: '套餐'
					},
					{
						name: '套餐'
					},
					{
						name: '套餐'
					},
					{
						name: '套餐'
					},
					{
						name: '套餐'
					},
					{
						name: '套餐'
					},
					{
						name: '套餐'
					},
					{
						name: '套餐'
					},
					{
						name: '套餐'
					},
					{
						name: '套餐'
					},

					{
						name: '套餐'
					},
					{
						name: '套餐'
					},
					{
						name: '套餐'
					},
				],
				list: [],
				current1: 1
			}
		},
		onShow() {
			//#ifdef APP-PLUS
			if (plus.navigator.hasNotchInScreen()) {
				this.tabbarHeight = 68
			}
			//#endif
		},
		onLoad() {
			for (let i = 0; i < 20; i++) {

				this.list.push({
					list: [{
							src: "/static/images/demo/cate_03.png",
							name: "商品一"
						},
						{
							src: "/static/images/demo/cate_03.png",
							name: "商品一"
						},
						{
							src: "/static/images/demo/cate_03.png",
							name: "商品一"
						},
						{
							src: "/static/images/demo/cate_03.png",
							name: "商品一"
						},
						{
							src: "/static/images/demo/cate_03.png",
							name: "商品一"
						},
						{
							src: "/static/images/demo/cate_03.png",
							name: "商品一"
						},
						{
							src: "/static/images/demo/cate_03.png",
							name: "商品一"
						},
						{
							src: "/static/images/demo/cate_03.png",
							name: "商品一"
						},
						{
							src: "/static/images/demo/cate_03.png",
							name: "商品一"
						},
						{
							src: "/static/images/demo/cate_03.png",
							name: "商品一"
						},
						{
							src: "/static/images/demo/cate_03.png",
							name: "商品一"
						},
						{
							src: "/static/images/demo/cate_03.png",
							name: "商品一"
						},
						{
							src: "/static/images/demo/cate_03.png",
							name: "商品一"
						},
						{
							src: "/static/images/demo/cate_03.png",
							name: "商品一"
						},
					]
				})
			}
		},
		methods: {
			tabChange(index) {

				if (index == 0) {
					uni.navigateTo({
						url: '/pages/index/index',
						animationType: 'zoom-fade-out',
						animationDuration: 200
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pages/cart/cart',
						animationType: 'zoom-fade-out',
						animationDuration: 200
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: '/pages/user/user',
						animationType: 'zoom-fade-out',
						animationDuration: 200
					})
				}
			},
			changeCate(index) {
				this.activeIndex = index
			}
		}
	}
</script>

<style>
	.tabbar {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.image_icon {
		width: 180upx;
		height: 180upx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FF5551;
	}

	.content_box {
		display: flex;
		flex-direction: column;
		height: 100%;
	}


	.class-active {
		color: #FF5551;

	}

	.class-active-line {
		background-color: #FF5551;

	}
</style>
